﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
<form id="form1">
    <!--文件上传-->
    <div>
        <fieldset>
            <legend>上传单个文件：</legend>
            <input type="file" name="fileUpload" id="fileUpload" />
        </fieldset>
        <fieldset>
            <legend>上传多个文件：</legend>
            <!--要一次选中多个文件，不能选中一个文件再点击控件再次选择-->
            <input type="file" name="fileUpload2" id="fileUpload2" multiple />
        </fieldset>
        <fieldset>
            <legend>调用BLOB接口获取文件类型与大小：</legend>
            <!--BLOB二进制数据块-->
            <input type="file" name="fileUpload3" id="fileUpload3" onchange="getFileList(this.files)" multiple />
            <ul id="ulUpd"></ul>
        </fieldset>
        <fieldset>
            <legend>用accept属性过滤类型：</legend>
            <!--仍有缺陷，选所有文件仍然可以无视类型选择文件-->
            <input type="file" name="fileUpload4" id="fileUpload4" multiple accept="image/gif" />
        </fieldset>
    </div>

    <!--BLOB只能获取文件信息，要读取或浏览文件，要使用FileReader接口-->
    <!--FileReader提供了一个异步API，可以异步读取文件中的数据并放入内存中-->
    <div>
        <fieldset>
            <legend>readAsDataUrl预览图片文件</legend>
            <input type="file" onchange="PrevImages(this.files)" multiple />
            <ul id="ulPrev"></ul>
        </fieldset>
        <fieldset>
            <legend>readAsText预览文件内容</legend>
            <input type="file" onchange="PrevText(this.files)" />
            <ul id="ulText"></ul>
        </fieldset>
        <fieldset>
            <legend>侦听FileReader接口中的事件</legend>
            <!-- start=>progress=>load=>loadend -->
            <!--大部分时间都用在progress上，如果读取过程中出现异常会直接进入onerror或onabort事件，不进入onload-->
            <!--onloadend无论文件读取成功失败都会触发，所以想要正确获取文件要在onload事件中 -->
            <input type="file" onchange="ShowEvents(this.files)" />
            <ul id="pStates"></ul>
        </fieldset>
        <fieldset>
            <legend>使用DataTransfer对象拖放上传图片文件</legend>
            <ul style="border:1px solid #ff6600;" id="ulDragUpd" ondrop="DropFile(event)"
                ondragenter="return false"
                ondragover="return false">
                请把文件拖入此区域
            </ul>
            
        </fieldset>
    </div>

</form>
<script type="text/javascript">
    function getFileList(f) {
        var strLi = "<li>";
        strLi += "<span>文件名称</span>";
        strLi += "<span>文件类型</span>";
        strLi += "<span>文件大小</span>";
        strLi += "</li>";

        //console.info(f);
        for (var i = 0; i < f.length; i++) {
            if (f[i].type == "xls") {   //根据type过滤文件(不是很好用，显示的文件的类型，不是后缀名)
                continue;
            }
            strLi += "<li>";
            strLi += "<span>" + f[i].name + "</span>&nbsp;";
            strLi += "<span>" + f[i].type + "</span>&nbsp;";
            strLi += "<span>" + f[i].size + "</span>";
            strLi += "</li>";
        }
        document.getElementById("ulUpd").innerHTML = strLi;
    }

    //预览上传的图片
    function PrevImages(f) {
        //检测浏览器是否支持FileReader
        if (typeof FileReader == "undefined") {
            alert('该浏览器不支持FileReader对象'); return;
        }

        var strHtml = "";
        for (var i = 0; i < f.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(f[i]);
            reader.onload = function (e) {
                strHtml += "<span>";
                strHtml += "<img width='320' height='180' src='" + e.target.result + "' />";
                strHtml += "</span>";
                document.getElementById("ulPrev").innerHTML = "<li>" + strHtml + "</li>";
            }
            reader.onerror = function (e) { //读取文件错误时返回的信息
                alert("FileError:" + e.target.error.code);
            }
        }
    }

    //预览上传文件的内容
    function PrevText(f) {
        //检测浏览器是否支持FileReader
        if (typeof FileReader == "undefined") {
            alert('该浏览器不支持FileReader对象'); return;
        }

        var strHtml="";        
        var reader = new FileReader();
        reader.readAsText(f[0]);
        reader.onload = function (e) {
            //控制一下预览文字的数量
            var content = e.target.result;
            if (content.length > 20) {
                content = content.substring(0, 20) + '...';
            }

            strHtml += "<pre>";
            strHtml += content;
            strHtml += "</pre>";
            document.getElementById("ulText").innerHTML = "<li>" + strHtml + "</li>";
        }
        
    }

    //显示上传文件的过程
    function ShowEvents(f) {
        //检测浏览器是否支持FileReader
        if (typeof FileReader == "undefined") {
            alert('该浏览器不支持FileReader对象'); return;
        }

        var reader = new FileReader();
        reader.readAsText(f[0]);    
        reader.onloadstart = function (e) {
            document.getElementById("pStates").innerHTML = "开始读取数据";
        }
        reader.onprogress = function (e) {
            document.getElementById("pStates").innerHTML = "正在读取数据";
        }
        reader.onload = function (e) {
            document.getElementById("pStates").innerHTML = "数据读取成功";
        }
        reader.onloadend = function (e) {
            document.getElementById("pStates").innerHTML = "文件读取成功";
        }        
    }

    //**拖曳文件上传**
    function MoveFile(f) {
        //检测浏览器是否支持FileReader
        if (typeof FileReader == "undefined") {
            alert('该浏览器不支持FileReader对象'); return;
        }

        for (var i = 0; i < f.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(f[i]);
            reader.onload = (function (f1) {
                return function (e) {
                    var eleSpan = document.createElement('span');
                    eleSpan.innerHTML = ['<img width="300" height="180" src="', e.target.result, '" title="', f1.name, '"/>"'].join(' ');
                    document.getElementById('ulDragUpd').insertBefore(eleSpan, null);
                }
            })(f[i]);
        }
    }
    function DropFile(e) {
        MoveFile(e.dataTransfer.files);
        //e.stopPropagation();    //停止事件传播(不知道干嘛的……)
        e.preventDefault();     //阻止默认事件(防止图片在浏览器中打开)
    }


</script>
</body>
</html>
